<template>
    <div class="session-list-style">
        这是头部,可以扩展好友列表、群组列表等功能
        <div>这是其它东西</div>
    </div>
    <session-list-item 
        v-for="(item, index) in sessionList" 
        :key="item.id" 
        :item="item"
        :length="sessionList.length"
        :index="index"
    />
</template>

<script lang="ts">
import { onMounted, onUnmounted } from 'vue';
import type { PropType } from 'vue';
import SessionListItem from './session-list-item.vue';
import type { SessionItem } from '../im-type/im-chat-type';

export default {
  components: { SessionListItem },
    // 会话列表，就好比微信的聊天列表，可以扩展好友列表、群组列表等功能
    name: 'session-list',
    props: {
        sessionList: {
            type: Array as PropType<SessionItem[]>,
            default: () => []
        }
    },
    setup() {
        // 初始化加载数据
        onMounted(() => {
            console.log('session-list onMounted');
        });
        // 卸载组件
        onUnmounted(() => {
            console.log('session-list onUnmounted');
        });
    }
}
</script>

<style scoped>
.session-list-style {
  width: 100%; /* 保持不变 */
  height: 100%; /* 保持不变 */
  background-color: #f5f5f5;
  right: 0;
  top: 0;
  position: fixed;
}
</style>
